<template>
  <div class="block_main blue-tit">
    <!-- <div class="nytit">首页&gt;通知/督办</div> -->
    <el-row style="padding-top: 10px">
      <el-col :span="24" style="padding:0 5px">
        <el-card>
          <div class="title">广告图管理</div>
          <!-- 筛选 -->
          <el-form
            style="padding:0px 20px"
            :inline="true"
            :model="region"
            class="demo-form-inline"
            size="small"
          >
            <!-- <el-form-item label="日期">
                            <el-date-picker
                                v-model="region.value1"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            ></el-date-picker>
            </el-form-item>-->
            <el-form-item label="活动名称">
              <el-input v-model="region.name"></el-input>
            </el-form-item>

            <!-- <el-form-item label="状态">
                            <el-select v-model="region.from" placeholder="状态">
                                <el-option label="全部" value="-1"></el-option>

                                <el-option
                                    v-for="(list,index) in originArr"
                                    :label="list.name"
                                    :value="list.value"
                                    :key="index"
                                ></el-option>
                            </el-select>
            </el-form-item>-->

            <el-form-item>
              <el-button @click="Filter" type="primary">查询</el-button>
              <el-button @click="bannerAdd" type="success">添加</el-button>
            </el-form-item>
            <!-- <span style="float:right;line-height:40px;">累计{{pagetotal}}项</span> -->
          </el-form>

          <!-- 表格内容组件 -->
          <div class="block_main blue-tit">
            <el-table :data="tableData" style="width: 100%;" v-loading="loading">
              <el-table-column type="progress" label="活动名称" fixed></el-table-column>
              <el-table-column type="progress" width="120" label="缩略图" fixed></el-table-column>
              <el-table-column prop="progress" label="创建时间" width="180"></el-table-column>
              <el-table-column prop="progress" label="链接"></el-table-column>

              <el-table-column width="120" prop="gname" label="操作">
                <template slot-scope="scope">
                  <a>下架</a>/
                  <a>通过</a>/
                  <a>删除</a>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 表格内容组件 end-->

          <!-- 翻页 -->
          <div class="zpage">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size.sync="pagesize"
              layout="total, prev, pager, next, jumper"
              :total.sync="pagetotal"
            ></el-pagination>
          </div>
          <!-- 翻页 end -->
        </el-card>
      </el-col>
    </el-row>

    <!-- 督办弹窗 -->
    <el-dialog title="添加广告图" :visible.sync="dialogVisibleSupervise" width="40%">
      <el-form
        ref="form"
        style="margin:20px;"
        :model="superviseForm"
        label-width="100px"
        size="small"
      >
        <el-form-item label="名称" style="width:100%;">
          <el-input type="text" v-model="superviseForm.desc" rows="5" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handleUpload"
            :on-success="fileSuccess"
            :multiple="true"
            :before-remove="handlemove"
            :file-list="fileList3"
            list-type="picture"
          >
            <el-button size="small" type="primary">上传图片</el-button>
            <!-- <div slot="tip" class="el-upload__tip">图片、压缩包等类型文件上传</div> -->
          </el-upload>
        </el-form-item>
        <el-form-item label="链接" style="width:100%;">
          <el-input type="text" v-model="superviseForm.url" rows="5" placeholder="请输入链接"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="superviseForm.resource">
            <el-radio label="开启"></el-radio>
            <el-radio label="停止"></el-radio>
            <el-radio label="待审核"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleSupervise = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="SuperviseSubmit" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import actionurl from "@/assets/js/actionurl";
import followList from "@/components/follow/List";
import selectMenu from "@/components/selectMenu.vue";
import config from "../../config";

export default {
  name: "tableChart",
  components: {
    followList,
    selectMenu
  },
  props: {
    chartOptions: Object,
    chartData: Object
  },
  data() {
    return {
      originArr: [],
      ThisID: 0,
      httpHome: "",
      dialogVisible: false,
      dialogVisibleMove: false,
      dialogVisibleSupervise: false,
      isShow: true,
      uType: "",
      moveForm: {},
      superviseForm: {},
      region: {
        startTime: "",
        endTime: "",
        target: 0,
        listStatus: -1,
        gname: "0"
      },
      notice: {
        company: "",
        content: "",
        target: "",
        group: "",
        accepttime: ""
      },
      layerForm: {},
      targetArr: [],
      tableData: [],
      target: "",
      status: "",
      currentPage: 1,
      pagesize: 10,
      pagetotal: 10000,

      loading: false,

      fileList3: []
    };
  },
  methods: {
    bannerAdd() {
      this.dialogVisibleSupervise = true;
    },
    intoDetail(id) {
      // console.log(id);
      this.$router.push({
        path: "/supervise/" + id + "/2"
      });
    },
    startChange(val) {
      //开始时间控制
      if (val) {
        this.region.startTime = val + " 00:00";
      } else {
        this.region.startTime = val;
      }
    },
    endChange(val) {
      //结束时间控制
      if (val) {
        this.region.endTime = val + " 23:59";
      } else {
        this.region.endTime = val;
      }
    },
    //获取子组件督办按钮事件
    childObjSupervise(obj) {
      this.fileList3 = [];
      this.superviseForm.desc = "";
      this.dialogVisibleSupervise = true;
      // console.log(obj);

      this.ThisID = obj.id;
    },
    update(name) {
      // console.log(name);
    },
    updateArea(name) {
      // console.log(name);
    },
    handleUpload(file, fileList) {
      // this.fileList3 = fileList.slice(-3);
    },
    fileSuccess(event, file, fileList) {
      var obj = {};
      obj.name = file.name;
      obj.url = file.response.data.path;
      this.fileList3.push(obj);
    },
    handlemove(file, fileList) {
      //删除文件操作
      this.loading = true;
      var data = this.fileList3.filter(function(item) {
        //删除文件数组中对应的uid文件
        return item.uid == file.uid;
      });

      this.fileList3.del(function(obj) {
        return obj.uid == data;
      });

      var _this = this;
      _this.fileRemove(file, _this.fileList3);
    },
    fileRemove(file, fileList) {
      //删除文件接口
      var _this = this;
      actionurl.delfile(
        {
          file: file.url
        },
        function(re) {
          if ((re.status = 1)) {
            _this.$message(re.msg);
          } else {
            _this.$message(re.msg);
          }
        }
      );
    },
    SuperviseSubmit() {
      //督办弹窗确定按钮
      var _this = this;

      actionurl.Qsupervise(
        {
          id: _this.ThisID,
          sup_attach: JSON.stringify(_this.fileList3),
          content: _this.superviseForm.desc
        },
        function(re) {
          if ((re.status = 1)) {
            _this.$message(re.msg);
          } else {
            _this.$message(re.msg);
          }
          _this.dialogVisibleSupervise = false;
        }
      );
    },
    // superDetail(row){//督办按钮

    //   this.$router.push({path: '/supervise/'+row.id});
    // },
    updateData(row) {
      //修改事件
      this.dialogVisible = true;
      this.notice.company = row.company;
      this.notice.content = row.content;
      this.notice.target = row.target;
      this.notice.gname = row.gname;
      this.notice.accepttime = row.accepttime;
      //修改弹窗字段
      this.movegname = row.gname;

      this.questionClass();
    },
    MessageList() {
      // 获取列表
      var _this = this;
      if (_this.uType == 3 || _this.uType == 1) {
        actionurl.MgetAllList(
          {
            pageNum: _this.pagesize,
            pageOn: _this.currentPage,
            progress: _this.region.listStatus,
            start: _this.region.startTime,
            end: _this.region.endTime,
            target: _this.region.target,
            company: _this.region.company,
            from: _this.region.from,
            group: _this.region.gname
          },
          function(re) {
            // console.log(re);
            if (re.status == 1) {
              _this.tableData = re.data;
              _this.pagetotal = re.count;
              _this.loading = false;
            } else {
              _this.$message(re.msg);
            }
          }
        );
      } else if (_this.uType == 2) {
        //如果是区县账号
        actionurl.wbAllList(
          {
            pageNum: _this.pagesize,
            pageOn: _this.currentPage,
            progress: _this.region.listStatus,
            start: _this.region.startTime,
            end: _this.region.endTime,
            target: _this.region.target,
            company: _this.region.company,
            group: _this.region.gname
          },
          function(re) {
            // console.log(re);
            if (re.status == 1) {
              _this.tableData = re.data;
              _this.pagetotal = re.count;
              _this.loading = false;
            } else {
              _this.$message(re.msg);
            }
          }
        );
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.MessageList();
    },
    //筛选
    Filter() {
      this.loading = true;
      this.MessageList();
    },
    targetListFn() {
      var _this = this;
      actionurl.targetList({}, function(re) {
        // console.log(re);
        if (re.status == 1) {
          _this.targetArr = re.data;
        } else {
          _this.$message(re.msg);
        }
      });
    },
    questionClass() {
      var _this = this;
      actionurl.MessageGroup(
        {
          mesgroup: 1, //0-面对面等分类 1-八大类
          fid: 1
        },
        function(re) {
          // console.log(re);
          if (re.status == 1) {
            _this.MessageGroupArr = re.data;
          } else {
            _this.$message(re.msg);
          }
        }
      );
    },
    AddQuestion() {
      this.$router.push({ path: "/questionAdd" });
    },
    getUserinfo() {
      //获取用户信息
      var _this = this;
      actionurl.getUserInfo({}, function(re) {
        _this.uType = re.userType;
        _this.MessageList();
        switch (re.userType) {
          case 1: //运营人员
            _this.isShowObj.mamageShow = true;
            break;
          case 2: //区县账号
            _this.isShowObj.areaShow = true;

            break;
          case 3: //运行局账号
            _this.isShowObj.officeShow = true;
            _this.isHide = true;
            break;
        }
      });
    }
  },
  created() {
    this.getUserinfo();
    this.httpHome = config.URLWEBHTTP;
    this.region.listStatus = "-1";
    this.region.target = "0";
    this.originArr = config.originArr;
    this.questionClass();
  },
  mounted() {
    // this.getUserinfo();
    this.targetListFn();
  }
};
</script>
<style scoped lang="scss">
.persent {
  width: 80%;
  height: 10px;

  display: flex;
  justify-content: space-between;
  position: relative;
  padding-right: 40px;

  span {
    background: #ccc;
    width: 100%;
    line-height: 10px;

    b {
      background: green;
      width: 100%;
      height: 100%;
      display: inline-block;
      float: left;
    }
  }

  em {
    line-height: 10px;
    position: absolute;
    right: 0;
  }
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 90%;
}

.layerup {
  h2 {
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    margin-bottom: 15px;
  }
  span {
    width: 46%;
    line-height: 20px;
  }
  p {
    display: flex;
    justify-content: space-between;
    color: #999;
    margin-bottom: 10px;
  }
  hr {
    border: 1px solid #f5f5f5;
    margin-top: 15px;
  }
}
.titlehover {
  cursor: pointer;
  &:hover {
    color: #1d82d2;
  }
}
</style>
